import Qt 4.7
import QtMobility.location 1.1

import "js/Engine.js" as Engine
import "js/G.js" as G
import "./delegates"

Item {
    id: container
    width: 360; height: 640

    property string token: "pf1UNqZNXhForn9TwiRz"; // user qclient@whatser.com; pwd 123456

    PositionSource {
        id: positionSource
        active: true
        updateInterval: 1000
        //onPositionChanged: console.log(position.coordinate.latitude)
    }

    MessageBox { id: theMessageBox; opacity: 0 }


    Rectangle {
        id: window
        //width: screen.width; height: screen.height
        width: container.width; height: container.height
        color: '#333333'
        gradient: Gradient {
            GradientStop {
                position: 0.00;
                color: "#333333";
            }
            GradientStop {
                position: 1.00;
                color: "#333333";
            }
        }

        property int toBeLoaded: 0

        Component.onCompleted: {
            Engine.reloadAll();
        }

        // automatically refresh everything every 15 minutes
        Timer {
            interval: 15*60*1000; running: true; repeat: true
            onTriggered: Engine.reloadAll();
        }

        Loading {
            id: imageLoading
            anchors.top: headerBar.bottom
            anchors.topMargin: 37
            anchors.horizontalCenter: parent.horizontalCenter
            visible: false
            rotation: 270
        }


        Image {
            id: headerBar
            source: "Images/macapp_headerbar.png"
            anchors.top: logoImage.bottom
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.right: parent.right
            z: 2
            opacity: 0.95
        }


        Image {
            id: logoImage
            source: "Images/logo.png"
            width: 188
            height: 51
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 20
            smooth: true
            z: 2

            MouseArea {
                anchors.fill: parent
                onClicked: ParallelAnimation {
                    running: true
                    SmoothedAnimation { target: activityList; property: "contentY"; duration: 150; to: 0 }
                    SmoothedAnimation { target: spotsList; property: "contentY"; duration: 150; to: 0 }
                    SmoothedAnimation { target: friendsList; property: "contentY"; duration: 150; to: 0 }
                    //SmoothedAnimation { target: myCitiesList; property: "contentY"; duration: 150; to: 0 }
                    SmoothedAnimation { target: suggestedSpotsList; property: "contentY"; duration: 150; to: 0 }
                }
            }
        }

        Image {
            id: quitImage
            source: "Images/icon-close.png"
            width: 9
            height: 9
            anchors.verticalCenter: logoImage.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 20
            smooth: true
            z: 2

            MouseArea {
                anchors.top: parent.top
                anchors.topMargin:  -10
                anchors.bottom: parent.bottom
                anchors.bottomMargin: -10
                anchors.left: parent.left
                anchors.leftMargin: -10
                anchors.right: parent.right
                anchors.rightMargin: -10
                onClicked: Qt.quit();
            }
        }

        Image {
            id: logoBackground
            anchors.top: parent.top
            anchors.bottom: headerBar.top
            anchors.left: parent.left
            anchors.right: parent.right
            source: "Images/macapp_cellbg.png"
            smooth: true
            fillMode: Image.Stretch
            z: 1
            opacity: 0.95
        }


        Text {
            id: idTextError
            anchors.fill: window
            z: 5
            visible: false
            text: ''
            color:  'white'
        }


        ListView { id: activityList
            anchors.top: headerBar.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: toolBar.top
            width: window.width
            z: 0
            cacheBuffer: 100
            model: activityModel
            delegate: activityDelegate

            property alias contentX: toolBar.contentX


            opacity: {
                var listCenter = width / 2;
                var curCenter = contentX + width / 2;
                var distance = Math.abs(listCenter - curCenter);

                if (distance > width) {
                    return 0;
                }
                return 1 - distance / width;
            }

            states: [
                State {
                    name: "loadingActivities"
                    PropertyChanges { target: activityList; visible: false }
                    PropertyChanges { target: imageLoading; visible: true }
                    StateChangeScript {
                        name: "js/Engine.js"
                        script: {
                            activityWorker.sendMessage({'model': activityModel, 'page': 1, 'token': container.token, 'g': G.g });
                        }
                    }
                }
            ]

            ScrollBar {
                id: activityListScrollBar
                scrollArea: activityList;
                height: activityList.height;
                width: 8;
                anchors.top: activityList.top;
                anchors.right: activityList.right
                z: activityListScrollBar.opacity == 1 ? 2 : 0
            }

            WorkerScript {
                id: activityWorker
                source: "js/ActivityLoader.js"
                onMessage: {
                    if (messageObject.result != 'SUCCESS') {
                        idTextError.text = messageObject.message.message;
                        idTextError.visible = true
                    }
                    activityList.state = messageObject.listState;
                    Engine.checkLoadingSpinner();

                }
            }

            Component {
                id: activityDelegate
                ActivityDelegate {}
            }

            ListModel {
                id: activityModel
            }
        }

        ListView { id: spotsList
            anchors.top: headerBar.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: toolBar.top
            width: window.width
            z: 0
            cacheBuffer: 100
            model: spotsModel
            delegate: spotsDelegate

            property alias contentX: toolBar.contentX
            property alias token: container.token



            opacity: {
                var listCenter = width * 1.5;
                var curCenter = contentX + width / 2;
                var distance = Math.abs(listCenter - curCenter);
                if (distance > width) {
                    return 0;
                }
                return 1 - distance / width;
            }

            states: [
                State {
                    name: "loadingSpots"
                    PropertyChanges { target: spotsList; visible: false }
                    PropertyChanges { target: imageLoading; visible: true }
                    StateChangeScript {
                        name: "js/Engine.js"
                        script: {
                            spotsWorker.sendMessage({'model': spotsModel, 'page': 1, 'token': container.token, 'geo': positionSource.position.coordinate.latitude +","+ positionSource.position.coordinate.longitude, 'g': G.g});
                        }
                    }
                }
            ]

            ScrollBar {
                id: spotsListScrollBar
                scrollArea: spotsList;
                height: spotsList.height;
                width: 8;
                anchors.top: spotsList.top;
                anchors.right: spotsList.right
                z: spotsListScrollBar.opacity == 1 ? 2 : 0
            }

            WorkerScript {
                id: spotsWorker
                source: "js/SpotsLoader.js"
                onMessage: {
                    if (messageObject.result != 'SUCCESS') {
                        idTextError.text = messageObject.message.message;
                        idTextError.visible = true;
                    }
                    spotsList.state = messageObject.listState;
                    Engine.checkLoadingSpinner();
                }
            }

            Component {
                id: spotsDelegate
                SpotsDelegate { token: container.token; }
            }

            ListModel {
                id: spotsModel
            }

        }

        ListView { id: suggestedSpotsList
            anchors.top: headerBar.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: toolBar.top
            width: window.width
            z: 0
            cacheBuffer: 100
            model: suggestedSpotsModel
            delegate: suggestedSpotsDelegate

            property alias contentX: toolBar.contentX

            opacity: {
                var listCenter = width * 2.5;
                var curCenter = contentX + width / 2;
                var distance = Math.abs(listCenter - curCenter);
                if (distance > width) {
                    return 0;
                }
                return 1 - distance / width;
            }

            states: [
                State {
                    name: "loadingSuggestedSpots"
                    PropertyChanges { target: suggestedSpotsList; visible: false }
                    PropertyChanges { target: imageLoading; visible: true }
                    StateChangeScript {
                        name: "js/Engine.js"
                        script: {
                            suggestedSpotsWorker.sendMessage({'model': suggestedSpotsModel, 'page': 1, 'token': container.token, 'g': G.g});
                        }
                    }
                }
            ]

            ScrollBar {
                id: suggestedSpotsListScrollBar
                scrollArea: suggestedSpotsList;
                height: suggestedSpotsList.height;
                width: 8;
                anchors.top: suggestedSpotsList.top;
                anchors.right: suggestedSpotsList.right
                z: suggestedSpotsListScrollBar.opacity == 1 ? 2 : 0
            }

            WorkerScript {
                id: suggestedSpotsWorker
                source: "js/SuggestedSpotsLoader.js"
                onMessage: {
                    if (messageObject.result != 'SUCCESS') {
                        idTextError.text = messageObject.message.message;
                        idTextError.visible = true
                    }
                    suggestedSpotsList.state = messageObject.listState;
                    Engine.checkLoadingSpinner();

                }
            }

            Component {
                id: suggestedSpotsDelegate
                SuggestedSpotsDelegate {}
            }

            ListModel {
                id: suggestedSpotsModel
            }

        }

        ListView { id: friendsList
            anchors.top: headerBar.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: toolBar.top
            width: window.width
            z: 0
            cacheBuffer: 100
            model: friendsModel
            delegate: friendsDelegate

            property alias contentX: toolBar.contentX

            opacity: {
                var listCenter = width * 3.5;
                var curCenter = contentX + width / 2;
                var distance = Math.abs(listCenter - curCenter);
                if (distance > width) {
                    return 0;
                }
                return 1 - distance / width;
            }

            states: [
                State {
                    name: "loadingFriends"
                    PropertyChanges { target: friendsList; visible: false }
                    PropertyChanges { target: imageLoading; visible: true }
                    StateChangeScript {
                        name: "js/Engine.js"
                        script: {
                            friendsWorker.sendMessage({'model': friendsModel, 'page': 1, 'token': container.token, 'g': G.g});
                        }
                    }
                }
            ]

            ScrollBar {
                id: friendsListScrollBar
                scrollArea: friendsList;
                height: friendsList.height;
                width: 8;
                anchors.top: friendsList.top;
                anchors.right: friendsList.right
                z: friendsListScrollBar.opacity == 1 ? 2 : 0
            }

            WorkerScript {
                id: friendsWorker
                source: "js/FriendsLoader.js"
                onMessage: {
                    if (messageObject.result != 'SUCCESS') {
                        idTextError.text = messageObject.message.message;
                        idTextError.visible = true
                    }
                    friendsList.state = messageObject.listState;
                    Engine.checkLoadingSpinner();

                }
            }

            Component {
                id: friendsDelegate
                FriendsDelegate {}
            }

            ListModel {
                id: friendsModel
            }
        }

        LoginSignup {
            id: loginSignupScreen
            anchors.top: headerBar.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: toolBar.top
            width: window.width
            z: 0
            property alias contentX: toolBar.contentX

            opacity: {
                var itemCenter = width * 4.5;
                var curCenter = contentX + width / 2;
                var distance = Math.abs(itemCenter - curCenter);

                if (distance > width) {
                    return 0;
                }
                return 1 - distance / width;
            }
        }


        ControlBar {
            id: toolBar
            anchors.bottom: window.bottom
            height:  62
            width: parent.width; opacity: 0.9
            z: 2

        }
    }
}
